<template>
	<view class="share-team">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'我的团队'"></navBar>
		</view>
		<view class="content">
			<view class="top-content">
				<view class="left">
					<view class="total-number">
						<view class="title">团队人数</view>
						<view class="number">{{ number_one }}</view>
					</view>
					<view class="direct-number">
						<view class="title">直推人数</view>
						<view class="number">{{ number_two }}</view>
					</view>
				</view>
				<view class="right">
					<image class="grade-background" src="/static/images/mine/team/grade_background.png" mode="widthFix">
					</image>
					<view class="grade">{{ grade }}</view>
				</view>
			</view>
			<view class="detail-content">
				<view class="headLine">团队人数</view>
				<view class="extract-content">
					<view class="title-group">
						<view class="title">序号</view>
						<view class="title">昵称</view>
						<view class="title">账号</view>
						<view class="title">等级</view>
					</view>
					<scroll-view class="scroll-panel" :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll">
						<block v-for="(res, index) in list" :key="index">
							<view class="line-content">
								<view class="id">{{ res.id }}</view>
								<view class="name">{{ res.name }}</view>
								<view class="account">{{ res.account }}</view>
								<view class="grade">{{ res.grade }}</view>
							</view>
						</block>
						<view class="no-more" v-if="noMore">~ 没有更多了 ~</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		GETteam
	} from '@/common/api.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 团队信息 */
				grade: 'Lv99', // 我的团队等级
				number_one: '0', // 销售人数
				number_two: '0', // 直属客户
				list: [{
					id: '1',
					name: 'Segu',
					account: '545128776',
					grade: 'V1'
				}, {
					id: '1',
					name: 'Segu',
					account: '545128776',
					grade: 'V1'
				}, ], // 团队人数
				// 页面数据
				page: 1, // 首页
				totalPage: 0, // 总页数

				number_three: '0', // 销售业绩
				number_four: '0', // 今日流水
				number_five: '0', // 昨日流水
				number_six: '0', // 当月流水
				number_seven: '0', // 上月流水
				directList: [], // 直推团队信息
				indirectList: [], // 间推团队信息
				isNotNull: false, // 是否为空

				/* 滚动加载 */
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				noMore: false, // 加载状态
			};
		},
		onLoad() {
			/* 获取账单明细 */
			// this.getTeam(); // 获取团队信息
		},
		onShow() {

		},
		methods: {

			// /* 选择设置 */
			// select(id) {
			// 	const that = this;
			// 	if (id === 0) {
			// 		that.select_status = 0;
			// 		if (that.directList.length === 0) {
			// 			that.isNotNull = true;
			// 		} else {
			// 			that.isNotNull = false;
			// 		};
			// 	} else {
			// 		that.select_status = 1;
			// 		if (that.indirectList.length === 0) {
			// 			that.isNotNull = true;
			// 		} else {
			// 			that.isNotNull = false;
			// 		};
			// 	};
			// },

			/* 团队明细 */
			getTeam() {
				const that = this;
				GETteam().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.number_one = result.team_num;
						that.number_two = result.zt_num;
						that.number_three = result.team_performance;
						that.number_four = result.yeji_team;
						that.number_five = result.yesterday_yeji;
						that.number_six = result.samemonth_yeji;
						// that.number_seven = ;
						that.directList = result.zt_data.map(item => {
							return {
								createTime: item.createTime,
								inviteId: item.inviteId,
								is_partner: item.is_partner,
								level: item.level,
								levelname: item.levelname,
								partner_name: item.partner_name,
								personal_yeji: item.personal_yeji,
								team_performance: item.team_performance,
								total_team: item.total_team,
								total_yeji: item.total_yeji,
								userId: item.userId,
								userName: item.userName,
								userPhone: item.userPhone.replace(/(\d{3})\d{4}(\d{4})/,
									'$1****$2') // 隐藏3-6的数字
							};
						});
						that.indirectList = result.interposition_data.map(item => {
							return {
								createTime: item.createTime,
								inviteId: item.inviteId,
								userId: item.userId,
								userName: item.userName,
								userPhone: item.userPhone.replace(/(\d{3})\d{4}(\d{4})/,
									'$1****$2') // 隐藏3-6的数字
							};
						});
						// if (that.totalPage == 1) {
						// 	that.noMore = true
						// }
					} else if (res.code === 2) {
						const result = res.data;
						that.list = [];
						that.number_one = result.team_num;
						that.number_two = result.zt_num;
						that.number_three = result.team_performance;
						that.number_four = result.yeji_team;
						that.number_five = result.yesterday_yeji;
						that.number_six = result.samemonth_yeji;
						// that.totalPage = result.total_page;
					} else {
						Fn.Toast(res.msg, 3, 1000);
					};
				});
			},
			// 加载更多 - 我的团队明细
			getMoreTeam() {
				const that = this;
				GETteam().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.number_one = result.team_num;
						that.number_two = result.zt_num;
						that.number_three = result.team_performance;
						that.number_four = result.yeji_team;
						that.number_five = result.yesterday_yeji;
						that.number_six = result.samemonth_yeji;
						// that.number_seven = ;
						// that.directList = result.zt_data.map(item => {
						// 	return {
						// 		createTime: item.createTime,
						// 		inviteId: item.inviteId,
						// 		is_partner: item.is_partner,
						// 		level: item.level,
						// 		levelname: item.levelname,
						// 		partner_name: item.partner_name,
						// 		personal_yeji: item.personal_yeji,
						// 		team_performance: item.team_performance,
						// 		total_team: item.total_team,
						// 		total_yeji: item.total_yeji,
						// 		userId: item.userId,
						// 		userName: item.userName,
						// 		userPhone: item.userPhone.replace(/(\d{3})\d{4}(\d{4})/,
						// 			'$1****$2') // 隐藏3-6的数字
						// 	};
						// });
						// that.indirectList = result.interposition_data.map(item => {
						// 	return {
						// 		createTime: item.createTime,
						// 		inviteId: item.inviteId,
						// 		userId: item.userId,
						// 		userName: item.userName,
						// 		userPhone: item.userPhone.replace(/(\d{3})\d{4}(\d{4})/,
						// 			'$1****$2') // 隐藏3-6的数字
						// 	};
						// });
						let moreList = result.list_data.map(item => {
							return {
								id: item.pledge_id, // 订单id号
								userID: item.user_id, // 用户ID
								reward: item.calculation_power, // 已获得收益
								date: item.add_time, // 订单时间
								pair: item.pledge_pair.split('/')[0], // 质押币种
							};
						});
						for (let i = 0; i < moreList.length; i++) {
							that.list.push(moreList[i]);
						};
						// if (that.totalPage == 1) {
						// 	that.noMore = true
						// }
					} else if (res.code === 2) {
						that.page = that.page + 1;
						that.noMore = true;
					} else {
						Fn.Toast(res.msg, 3, 1000);
					};
				});
			},
			// 滚动加载
			upper(e) {
				// console.log(e)
			},
			lower(e) {
				// console.log(e)
				const that = this;
				if (that.page <= that.totalPage) {
					that.page = that.page + 1;
					that.getMoreTeam();
				};
			},
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss">
	.share-team {

		.content {
			padding: 10px 18px;

			.top-content {
				background-image: url("~@/static/images/mine/team/background.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 55rpx 24rpx;
				border-radius: 10px;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.left {

					.total-number {
						color: #FFFFFF;

						.title {
							font-size: 30rpx;
							font-family: AlibabaPuHuiTi_2_55_Regular;
						}

						.number {
							font-size: 50rpx;
						}
					}

					.direct-number {
						display: flex;
						align-items: center;
						color: #FFFFFF;

						.title {
							font-size: 30rpx;
							font-family: AlibabaPuHuiTi_2_55_Regular;
						}

						.number {
							margin-left: 20rpx;
							font-size: 40rpx;
						}
					}
				}

				.right {
					position: relative;

					.grade-background {
						width: 140rpx;
						height: auto;
					}

					.grade {
						position: absolute;
						top: 0;
						left: 54rpx;
						margin-top: 6rpx;
						color: #FFFFFF;
						font-size: 30rpx;
					}
				}
			}

			.detail-content {
				margin-top: 40rpx;

				.headLine {
					font-size: 34rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
				}

				.extract-content {
					height: 900rpx;
					margin-top: 40rpx;
					// box-sizing: border-box;
					border: 1px solid #EFEFEF;
					padding: 40rpx 20rpx;

					.title-group {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							text-align: center;
							color: #7F7F7F;
							font-size: 28rpx;

							&:nth-of-type(1) {
								width: 15%;
							}

							&:nth-of-type(2) {
								width: 35%;
							}

							&:nth-of-type(3) {
								width: 35%;
							}

							&:nth-of-type(4) {
								width: 15%;
							}
						}
					}

					.scroll-panel {
						max-height: 860rpx;

						.line-content {
							margin-top: 20rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text-align: center;
							font-size: 28rpx;

							.id {
								width: 15%;
							}

							.name {
								width: 35%;
							}

							.account {
								width: 35%;
							}

							.grade {
								width: 15%;
							}
						}

						.no-more {
							text-align: center;
							margin: 40rpx 0 0 0;
							color: #B6BCC5;
							font-size: 14px;
							font-family: AlibabaPuHuiTi_2_85_Bold;
						}
					}
				}
			}
		}
	}
</style>
